<%@ page import="service.CourseService" %>
<%@ page import="java.util.List" %>
<%@ page import="dao.Lesson" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="dao.Section" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    int cid=Integer.parseInt(request.getParameter("cid"));
    String id=null;
    try {
        id=request.getSession().getAttribute("username").toString();
    }catch (Exception e){
        e.printStackTrace();
    }
    String imagePath=CourseService.getCourseImagePath(cid);
    String courseName=CourseService.getCourseName(cid);
    String teacherName=CourseService.getTeacherName(cid);
    String introduction=CourseService.getCourseIntroduction(cid);

    List<Section> sections=CourseService.getSectionsByCid(cid);
    List<List<Lesson>> lessonsList=new ArrayList<>();
    for(int i=0;i<sections.size();i++){
        List<Lesson> lessons=CourseService.getLessonsBySectionId(sections.get(i).sectionId);
        lessonsList.add(lessons);
    }
%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>课程详情</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/course.css">
</head>
<body>
    <!--头部-->
    <div class="top">
        <div class="w">
            <div class="top-left">
                <img src="images/Q-logo.png">
            </div>
            <div class="top-center">
                <input placeholder="搜索你感兴趣的课程" id="wd">
                <script>
                    function search() {
                        var wd=document.getElementById('wd');
                        window.location.href="search-result.jsp?wd="+wd.value;
                    }
                </script>
                <button class="iconfont" onclick="search()">&#xe63c;</button>
            </div>
            <div class="top-right">
                <ul>
                    <a href="index.jsp"><li>首页</li></a>
                    <a href="login.jsp"><li>登录注册</li></a>
                    <a href="self.jsp"><li>个人主页</li></a>
                </ul>
            </div>
        </div>
    </div>

    <div class="top-banner" style="background-image: url(images/bg2.jpg); background-size: cover;">
        <div class="w">
            <div class="text">
                <h2>学习这件事不在乎有没有人教你，最重要的是在于你自己有没有觉悟和恒心。——法布尔</h2>
            </div>
        </div>
    </div>
    <!--中部-->
    <div class="main">
        <div class="main-top-bar">
            <div class="w">
                <a href="index.jsp">首页&nbsp>&nbsp</a>
                <a href="javascript:history.back(-1)">搜索结果&nbsp>&nbsp</a>
                <a href="#" class="current">课程详情</a>
            </div>
        </div>
        <div class="main-content">
            <div class="w2">
                <div class="breaf-info">
                    <img style=" " alt=""
                         src="<%=imagePath%>"/>
                    <div class="breaf-info-text">
                        <br>
                        <h1><%=courseName%></h1>
                        <hr noshade="1" size="2px" color="#dddddd" width="200px" style="float: left">
                        <h1 style="color: red"><%=teacherName%></h1>
                        <br>
                        <a href="SelectCourse?sid=<%=id%>&cid=<%=cid%>">
                            <script>
                                function haveSid() {
                                    var sid=<%=id%>
                                    if(sid==null){
                                        alert("请登录！");
                                        return false;
                                    }
                                }
                            </script>
                            <button onclick="return haveSid();">
                                立即加入
                            </button>
                        </a>
                    </div>
                </div>
                <div class="info-header">
                    <a href="#" class="current">课程介绍</a>
                    <a href="#">课程目录</a>
                </div>
                <div class="full-info">
                    <div class="w2">
                        <div class="dom" style="display: block;">
                            <h1>课程概述</h1>
                            <p>
                                <%=introduction%>
                            </p>
                        </div>
                        <div class="dom">
                            <h1>目录：</h1>
                            <hr noshade="1" size="2px" color="#dddddd">
                            <%
                                for(int i=0;i<sections.size();i++){
                                    List<Lesson> lessons=lessonsList.get(i);
                            %>
                                    <div class="ch">
                                        <p class="p1"><b>章节<%=(i+1)%></b>&nbsp&nbsp&nbsp</p>
                                        <p class="p2"><%=sections.get(i).sectionName%></p>
                                    </div>
                                <%
                                    for(int j=0;j<lessons.size();j++){
                                        Lesson lesson=lessons.get(j);
                                %>
                                        <div onclick="" class="jump">
                                            <p class="p3" style="">课时<%=(j+1)%>&nbsp&nbsp&nbsp</p>
                                            <p class="p4" style=""><%=lesson.lessonName%></p>
                                            <p class="p5" style="">21min</p>
                                        </div>
                            <%
                                    }
                                }
                            %>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {
            // 1.1 获取需要的标签
            let as = document.getElementsByClassName('info-header')[0].getElementsByTagName('a');
            let contents = document.getElementsByClassName('dom');

            // 1.2 遍历
            for (let i = 0; i < as.length; i++) {
                // 1.2.1 取出单个对象
                let a = as[i];
                a.id = i;

                // 1.2.2 监听鼠标的移动事件
                a.onclick = function () {
                    // 让所有的a的class都清除
                    for (let j = 0; j < as.length; j++) {
                        as[j].className = '';
                        contents[j].style.display = 'none';
                    }

                    // 设置当前a的class
                    this.className = 'current';
                    // 从contents数组中取出对应的标签
                    contents[this.id].style.display = 'block';
                }

            }
        }
    </script>

    <!--尾部-->
    <div class="bottom">
        <div class="bottom-board">
            <span>丰富的视频资源帮助学生更好地学习</span>
            <span>基于认知负荷的多少推荐课程</span>
            <span>方案多多，适合每一位学生</span>
        </div>

    </div>
</body>
</html>